<template>
  <div>
    <el-card class="box-card">
      <div>
        <h1>购物车</h1>
        <div v-if="tableData.length">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" width="50" align="center" header-align="center">
            </el-table-column>
            <el-table-column prop="name" label="书籍名称" width="180" align="center" header-align="center">
            </el-table-column>
            <el-table-column prop="url" label="图片" width="180" align="center" header-align="center">
              <img :src="tableData.url" >
            </el-table-column>
            <el-table-column prop="price" label="价格" width="180" align="center" header-align="center">
              <template slot-scope="scope">
                <div>{{ scope.row.price | showPrice }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="count" label="购买数量" width="180" align="center"
                             header-align="center">
              <template slot-scope="scope">
                <div style="display: flex;align-items: center;justify-content:
                        center;">
                  <el-button size="small" @click="decrement(scope.$index)" :disabled="scope.row.count <= 1"> -
                  </el-button>
                  <div style="width: 50px;">{{ scope.row.count }}</div>
                  <el-button size="small" type="primary" @click="increment(scope.$index)"> +
                  </el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="120" align="center" header-align="center">
              <template slot-scope="scope">
                <el-button type="danger" size="small" @click="removeHandle(scope.$index)">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <h2 style="color: #f3721c;margin: 0 auto">总计：{{ totalPrice | showPrice }}</h2>
          <el-button type="success" size="medium" style="margin-left: 600px;width: 150px;height: 60px;font-size: 20px" >结账</el-button>
        </div>
        <div v-else>购物车为空</div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "cart",
  data() {
    return {
      tableData: [
        {
          name: '《C Primer Plus》',
          url:'',
          price: 155.00,
          count: 1
        },
        {
          name: '《计算机系统基础》',
          url:'',
          price: 100.00,
          count: 1
        },
        {
          name: '《深入浅出Vue.js》',
          url:'',
          price: 200.00,
          count: 1
        },
        {
          name: '《算法》',
          url:'',
          price: 250.00,
          count: 1
        }

      ],
    }
  },
  computed: {
    totalPrice() { //计算总价
      let total = 0;
      for (let i in this.tableData) {
        total += this.tableData[i].price * this.tableData[i].count;
      }
      return total
    }
  },
  filters: { //过滤器
    // 拼接价格/总价
    showPrice(price) {
      return '￥' + price.toFixed(2);
    }
  },
  methods: {
    increment(index) {//加
      this.tableData[index].count++
    },
    decrement(index) {//减
      this.tableData[index].count--
    },
    removeHandle(index) {//移除
      this.tableData.splice(index, 1);
    }
  }
}

</script>

<style scoped>

</style>